<template>
  <view>
    <view class="collect-container" v-if="total !== 0">
      <view v-for="(goods,i) in collection" :key="i" @click="gotoDetail(goods)">
        <uni-swipe-action>
          <uni-swipe-action-item :right-options="options" @click="swipeItemClickHanlder(goods.goods_id)">
            <my-goods :goods="goods"></my-goods>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
    </view>
    <!-- 空白收藏夹的区域 -->
    <view class="empty-collection" v-else>
      <uni-icons type="star" size="100" color="#A2A2A2"></uni-icons>
      <text class="tip-text">空空如也~</text>
    </view>
  </view>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  export default {
    data() {
      return {
        // 左滑删除收藏商品的配置项
        options: [{
          text: '删除',
          style: {
            backgroundColor: '#C00000'
          }
        }]
      };
    },
    onLoad() {
      uni.setNavigationBarTitle({
        title: "我的收藏"
      })
    },
    computed: {
      ...mapState('m_user', ['token', 'collection']),
      // 计算收藏商品的数量
      total() {
        return this.collection.length
      }
    },
    methods: {
      ...mapMutations('m_user', ['delCollection']),
      // 跳转到商品详情页并传参
      async gotoDetail(goods) {
        // 跳转之前检查该商品数据是否完整（数据库中）
        const goods_id = goods.goods_id
        const { data: res } = await uni.$http.get("/api/public/v1/goods/checkoutdetail", { goods_id })
        // 数据库中商品信息不全，给出提示
        if (res.meta.status !== 200) {
          return uni.showToast({
            icon: 'error',
            title: res.meta.msg,
            duration: 1500
          })
        }
        // 商品信息完整，跳转到商品详情页
        uni.navigateTo({
          url: `/subpkg/goods_detail/goods_detail?goods_id=${goods_id}`
        })
      },
      // 左滑删除收藏商品的操作
      swipeItemClickHanlder(goods_id) {
        this.delCollection(goods_id)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .empty-collection {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 150px;

    .tip-text {
      font-size: 12px;
      color: gray;
    }
  }
</style>
